import { useState, useEffect } from 'react'

/**
 * 实时获取当前屏幕宽度的自定义 Hook
 * @returns {number} 当前屏幕宽度（单位：像素）
 */
export function useScreenWidth(): number {
  const [screenWidth, setScreenWidth] = useState<number>(window.innerWidth)

  useEffect(() => {
    // 定义更新屏幕宽度的函数
    const handleResize = () => {
      setScreenWidth(window.innerWidth)
    }

    // 监听窗口大小变化
    window.addEventListener('resize', handleResize)

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, []) // 空依赖数组确保只绑定一次

  return screenWidth
}
